<div class="row">
    <div class="col-md-4 col-md-offset-4">
        <div class="login-panel panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Ingrese sus Credenciales</h3>
            </div>
            <div class="panel-body">
                <form id="login_form" data-action_url="<?php echo url_for("login/doLogin"); ?>" data-success_url="<?php echo url_for("welcome/index"); ?>" role="form">
                    <fieldset>
                        <div class="form-group">
                            <input id="username" class="form-control" placeholder="Email o Usuario" type="email" autofocus>
                        </div>
                        <div class="form-group">
                            <input id="password" class="form-control" placeholder="Password" type="password" value="">
                        </div>
                        <div class="form-group">
                            <button type="button" id="login" class="btn btn-outline btn-success">
                                <span class="glyphicon glyphicon-user"></span> Ingresar
                            </button>
                            <button type="reset" class="btn btn-outline btn-danger">
                                <span class="glyphicon glyphicon-remove"></span> Cancelar
                            </button>
                            <div class="btn-group">
                                <button type="button" class="btn btn-outline btn-warning dropdown-toggle" data-toggle="dropdown">
                                    <span class="glyphicon glyphicon-question-sign"></span> Ayuda <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#" id="recover_link">Recuperar Clave</a></li>
                                    <li class="divider"></li>
                                    <li><a href="<?php echo url_for("public/index") ?>">Consulta de horarios</a></li>
                                    <li><a id="add_user_link" href="#">Registrarse como Nuevo Usuario</a></li>
                                </ul>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="recovery_modal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="mySmallModalLabel">Recuperar Password</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Cuenta de Correo Electronico del usuario</label>
                        <input type="email" id="recovery_email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                    </div>
                    <button id="recovery_button" data-url_action="<?php echo url_for("login/forgotPassword"); ?>" type="submit" class="btn btn-default">Submit</button>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>


<div class="modal fade" id="new_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Registrarse como Nuevo Usuario</h4>
            </div>
            <div class="modal-body">
                <div role="tabpanel">
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#general_info" role="tab" data-toggle="tab">Informacion General</a></li>
                        <li role="presentation"><a href="#medical_info" role="tab" data-toggle="tab">Informacion Adicional</a></li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="general_info">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Correo Electronico</label>
                                <input type="email" class="form-control" id="new_email_user" placeholder="Ingrese su correo">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Nombre de Usuario</label>
                                <input type="text" class="form-control" id="new_username" placeholder="Nombre de Usuario">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Password</label>
                                <input type="password" class="form-control" id="new_password" placeholder="Ingrese Password">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Confirme Password</label>
                                <input type="password" class="form-control" id="new_confirm_password" placeholder="Confirme Password">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Nombre</label>
                                <input type="text" class="form-control" id="new_firstname" placeholder="Nombre Segun DUI">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Apellido</label>
                                <input type="text" class="form-control" id="new_lastname" placeholder="Apellido Segun DUI">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Genero</label>
                                <select id="new_gender" class="form-control">
                                    <option value="" disabled selected>Seleccione su Genero</option>
                                    <option value="1">Masculino</option>
                                    <option value="2">Femenino</option>
                                </select>
                            </div>

                        </div>
                        <div role="tabpanel" class="tab-pane" id="medical_info">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Fecha de Nacimiento</label>
                                <input type="date" class="form-control" id="new_birthdate" />
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Grupo Sanguineo</label>
                                <select id="new_booldtype" class="form-control">
                                    <option value="ORH+" selected>ORH+</option>
                                    <option value="ORH-">ORH-</option>
                                    <option value="O-">O-</option>
                                    <option value="O+">O+</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button data-url_action="<?php echo url_for('login/saveNewUser'); ?>" id="save_new_user" type="button" class="btn btn-primary">Enviar Informacion</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {       
        $("#recover_link").on('click', function(event) {
            $("#recovery_modal").modal('show');
            return false;
        });
        $("#add_user_link").on('click', function(event) {
            $("#new_user_modal").modal('show');
            event.preventDefault();
            return false;
        });
        
        $("#save_new_user").on('click', function(event) {
            var sUrl = $(this).data("url_action");
            var oForm = {
                'email': $("#new_email_user").val(),
                'username': $("#new_username").val(),
                'password': $("#new_password").val(),
                'confirm_password': $("#new_confirm_password").val(),
                'firstname': $("#new_firstname").val(),
                'lastname': $("#new_lastname").val(),
                'gender': $("#new_gender option:selected").val(),
                'birthdate': $("#new_birthdate").val(),
                'bloodtype': $("#new_booldtype").val()
            };
            $.ajax({
                url: sUrl,
                type: 'post',
                dataType: 'json',
                data: oForm,
                success: function(oData) {
                    if (oData.message_list.length == 0) {
                        jsUtil.Gritter.addSuccessMessage("Usuario creado exitosamente!");
                        $("#new_user_modal").modal('hide');
                        document.getElementById("form_new_user").reset();
                    } else {
                        for (var i = 0; i <= oData.message_list.length; i++) {
                            jsUtil.Gritter.addErrorMessage(oData.message_list[i]);
                        }
                    }                    
                }
            });
            event.preventDefault();
        });
        
        $("#recovery_button").on('click', function() {
            var sURL = $(this).data("url_action");
            $.ajax({
                url : sURL,
                dataType: 'json',
                type: 'post',
                data: {
                    "email" : $("#recovery_email").val()
                }, success: function(oData) {
                    if (oData.message_list.length > 0) {
                        for (var i = 0; i < oData.message_list.length; i++) {
                            jsUtil.Gritter.addErrorMessage(oData.message_list[i]);
                        }
                    } else {
                        jsUtil.Gritter.addSuccessMessage(oData.success);
                        $("#recovery_modal").modal('hide');
                        $("#recovery_email").val("")
                    }
                }
            });
            return false;
        });
        
        $("#login").click(function(event) {
            var oLogin = {
                username : $("#username").val(),
                passwd : $("#password").val()
            };
            $.ajax({
                url: $("#login_form").data('action_url'),
                data: oLogin,
                dataType: 'json',
                success: function(oData, textStatus, jqXHR) {
                    console.log(textStatus);
                    console.log(oData);
                    if (oData.message_list.length > 0) {
                        for (var i = 0; i < oData.message_list.length; i++) {
                            jsUtil.Gritter.addErrorMessage(oData.message_list[i]);
                        }
                    } else {
                        window.location.replace($("#login_form").data('success_url'));
                    }
                },
                type: 'post'
            });
            event.preventDefault();
        });
    });
</script>